<template>
  <div class="login-box">
    <img :src="loginState.bg_img" class="login-box-bg">

    <div class="login-box-main">
      <div class="img">
        <img :src="loginState.left_img" class="login-box-bg1">
      </div>
      <div class="form">
        <el-form :model="loginForm" :rules="loginRules" ref="loginForm" class="login-form">
          <div class="login-form-title">
            <img :src="loginState.company_img2">
            <span>{{ loginState.company_name }}</span>
          </div>

          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入您的账号">
              <template slot="prefix">
                <svg-icon icon-class="user"/>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="userpasswd">
            <el-input v-model="loginForm.userpasswd" :type="passWordType?'password':'text'" placeholder="请输入您的密码">
              <template slot="prefix">
                <svg-icon icon-class="password"/>
              </template>
              <template slot="suffix">
                <svg-icon :icon-class="passWordType?'eye':'eye-open'" @click="passWordShow"/>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="validatecode">
            <div class="verification-code">
              <el-input v-model="loginForm.validatecode" placeholder="请输入验证码">
                <template slot="prefix">
                  <svg-icon icon-class="form"/>
                </template>
              </el-input>
              <div class="verification-code-img">
                <img :src="captcha_img" @click="captchaMethod" v-if="captcha_img!=null">
              </div>
            </div>
          </el-form-item>

          <el-form-item class="login-form-submit" v-if="isLogin">
            <el-button type="danger" @keyup.enter="submitForm" @click="submitForm('loginForm')">登录</el-button>
          </el-form-item>
          <el-form-item class="login-form-submit2" v-if="!isLogin">
            <el-button type="info">登录成功，跳转中...</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
  </div>
</template>

<script>
// login
import {mapState} from 'vuex'

export default {
  components: {},
  props: [],
  computed: {
    ...mapState('common', {
      loginState: state => state
    }),
  },
  data() {
    return {
      isLogin: true,//是否登陆中
      //密码是否显示
      passWordType: true,
      captcha_img: null,
      //提交数据
      loginForm: {
        username: 'admin',// 默认超级管理员admin
        userpasswd: '111111',//111111
        validatecode: ''//验证码
      },
      //验证
      loginRules: {
        username: [{required: true, trigger: 'blur', message: '请输入用户名',}],
        userpasswd: [
          {required: true, trigger: 'blur', message: '请输入密码'},
          {min: 6, max: 12, trigger: 'blur', message: '长度在 6 到 15 个字符'}
        ],
        validatecode: [
          {required: true, trigger: 'blur', message: '请输入验证码'}
        ]
      },
    };
  },
  created() {

    let _this = this;
    document.onkeydown = function (e) {
      let key = null;
      if (window.event == undefined) {
        key = e.keyCode;
        console.log(key)
      } else {
        key = window.event.keyCode;
      }
      //enter的ASCII码是13
      if (key == 13) {
        _this.submitForm('loginForm');
      }
    }
  },
  mounted() {
    this.captchaMethod();
  },
  methods: {
    //获取验证码 获取系统基础设置
    captchaMethod() {
      //获取验证码
      this.$captcha().then((result) => {
        this.captcha_img = result.msg
      })
    },
    //密码是否显示
    passWordShow() {
      this.passWordType = !this.passWordType;
    },
    //登录
    submitForm(loginForm) {
      this.$refs[loginForm].validate((valid) => {
        if (valid) {
          this.isLogin = false;
          let data = this.loginForm;
          //测试代码
          // let aa=true
          // if(aa){
          //   window.sessionStorage.setItem('routerRole', '[20000]');
          //   this.$router.push('/dashboard/index');//跳转*/
          //   let tabsViewArray=[{ path: '/dashboard/index', query: {}, fullPath: '/dashboard/index',title:'首页',iconCloseShow:false,}];
          //   this.resetSetItem('tabsViewArray', JSON.stringify(tabsViewArray));
          //   return false
          // }
          //测试代码结束

          this.$login(data).then((result) => {
            // window.sessionStorage.setItem('token', result.msg);//token
            window.localStorage.setItem('token', result.msg);//token

            window.sessionStorage.setItem('username', result.data.username);//登录名称
            window.sessionStorage.setItem('id', result.data.id);//用户id

            window.sessionStorage.setItem('avatar', result.data.photoUrl);//头像
            window.localStorage.setItem('currentPermissions', '100');  //管理端 100 是管理端 目前先恒定
            let remark = JSON.parse(result.data.remark);
            let powerRes = remark.all.concat(remark.one);
            //管理员跳转
            if (powerRes.includes(20000)) {
              window.sessionStorage.setItem('routerRole', '[20000]');
              let tabsViewArray=[{ path: '/dashboard/index', query: {}, fullPath: '/dashboard/index',title:'首页',iconCloseShow:false,}];
              this.resetSetItem('tabsViewArray', JSON.stringify(tabsViewArray));
              this.$router.push('/dashboard/index')
            } else {
              //跳转相关路由
              window.sessionStorage.setItem('routerRole', JSON.stringify(powerRes));
              let powerRouterId = powerRes;
              let routerOptions = this.$router.options.routes;
              for (let i = 0; i < routerOptions.length; i++) {
                if (!routerOptions[i].meta.id) {
                  continue
                }
                for (let j = 0; j < powerRouterId.length; j++) {
                  if (routerOptions[i].meta.id == powerRouterId[j]) {
                    this.$router.push(routerOptions[i].path);//跳转
                    return false;
                  }
                }
              }
            }
          }, () => {
            this.isLogin = true;
            this.captchaMethod();
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },

};
</script>
<style lang="scss">

.login-form {
  //账号密码输入框
  .el-input__inner {
    color: $login-input-color;
    padding: 8px 35px;
    font-size: 14px;
    border: 0;
    border-radius: 18px;
    height: 42px !important;
    line-height: 42px !important;
    background: $login-input-bg;

    &::placeholder {
      color: $login-input-placeholder-color;
    }

    &::-webkit-input-placeholder {
      /* WebKit browsers 适配谷歌 */
      color: $login-input-placeholder-color;
    }

    &:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 适配火狐 */
      color: $login-input-placeholder-color;
    }

    &::-moz-placeholder {
      /* Mozilla Firefox 19+ 适配火狐 */
      color: $login-input-placeholder-color;
    }

    &:-ms-input-placeholder {
      /* Internet Explorer 10+  适配ie*/
      color: red;
    }
  }

  .el-input--small {
    color: #454545;
    background: rgba(0, 0, 0, 0.1);
    border: 0;
    border-radius: 18px;
  }

  .el-input__prefix {
    line-height: 42px;
    padding-left: 8px;
  }

  .el-input__suffix {
    line-height: 42px;
    padding-right: 8px;
    font-size: 20px;
    cursor: pointer;
  }

  .el-form-item {
    margin-bottom: 25px;
  }

  //登录按钮
  .login-form-submit {
    margin-bottom: 8px;

    .el-button {
      margin-top: 8px;
      width: 100%;
      border: 0;
      padding: 15px 0;
      font-size: 16px;
      border-radius: 20px;
      background: $login-color;
    }
  }

  //登陆中
  .login-form-submit2 {
    margin-bottom: 8px;

    .el-button {
      margin-top: 8px;
      width: 100%;
      border: 0;
      padding: 15px 0;
      font-size: 16px;
      border-radius: 20px;
      background: #909399;
    }
  }
}
</style>
<style lang="scss" scoped>
.svg-icon {
  color: $login-svg-color;
}

.login-box {
  text-align: center;
  //水平居中
  &-main {
    width: 1200px;
    height: 100vh;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    @include flex();

    .img {
      img {
        width: 100%;
      }

      margin-right: 60px;
    }

    .form {
      width: 450px;
      flex: 0 0 auto;
    }
  }

  //背景图
  &-bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
  }

}

//表单内容布局
.login-form {
  padding: 20px 26px;
  background: #fff;
  position: relative;
  z-index: 1;
  border-radius: 15px;

  &-title {
    text-align: center;
    @include flex();
    padding-bottom: 25px;
    font: {
      weight: bold;
      size: 22px;
    };
    color: $login-name-color;

    img {
      margin-right: 14px;
      height: 50px;
      border-radius: 5px;
    }
  }
}

//验证码
.verification-code {
  @include flex();

  &-img {
    flex: 0 0 auto;
    width: 180px;

    img {
      margin-left: 12px;
      width: 180px;
      height: 42px;
      border-radius: 18px;
      cursor: pointer;
    }
  }
}

</style>
